.sidebar { //general styles for the sidebar
  float: none;
  display: table-cell;
  vertical-align: top;
  border-right: 1px solid #c1c1c2;
  height: ~'calc(100vh - 353px)';
  height: ~'-webkit-calc(100vh - 353px)';

  h1 {
    text-align: left;
    color: @white;
    line-height: 60px;
    margin-bottom: 20px;
  }

  .button {
    font-size: 15px;
    color: @dark-blue-text;
    letter-spacing: 3px;
  }

  .toggle {
    font-size: 22px;
    .helvetica-neue-light;
    color: @dark-gray-text;
    padding: 20px;
    border-bottom: 1px solid #c1c1c2;

    a {
      display: block;
      color: @dark-gray-text;

      &:hover {
        color: @dark-gray-text;
      }
    }

    .open-close {
      background: url(../images/open_close.png) no-repeat 0 0;
      height: 20px;
      width: 20px;
      position: absolute;
      right: 0;
      top: 25px;
    }

  }

  .sidebar-nav { //style all sidebar-navs
  }

  ul { //general sidebar list styles

    li { //general sidebar list item styles
      font-size: 22px;
      .helvetica-neue-light;
      letter-spacing: 1px;

      a {
          display: block;
      } //li a

    } //li

    ul.sub { //subnav list styles
      border-top: none;
      list-style-type: none;
      margin: 0 0 0 12px;

      li {
        font-size: 18px;
        border: none;
        border-bottom: none !important;
      } //ul.sub li
    } //ul.sub

    @media screen and (min-width: 768px) {
      display: block !important;
      margin: 24px 12px;
    } //@media 768px

  } //ul

  .docs & { //styles for the documentation sidebar

    li.current a {
      .helvetica-neue-light;
      color: @blue-text;
      @media screen and (min-width: 768px) {
        background: url(../images/current_pointer.png) no-repeat right center;
        margin-right: -13px;
        padding-right: 18px;
        z-index: 999;
      }
    }

    ul { //style documentation list

      li { //style documentation list items
        text-transform: capitalize;
        color: @dark-gray-text;
        padding: 8px 0 8px 12px;
        border-top: 1px solid #c1c1c2;
        line-height: 32px;

        a.nocap {
          text-transform: none;
        }

        &:first-child {
          border-top: none;
        }

        &:last-child {
          border-bottom: none;
        }

        &.current { //style the current selected list item
        }
      } //li
    } //ul
  } //.documentation .sidebar
} //sidebar
